<template>
  <el-drawer v-model="showDialog" title="等级设置" destroy-on-close>
    <el-form
      :model="formData"
      ref="formRef"
      :rules="formRules"
      class="page-form"
      v-loading="loading"
    >
      <el-form-item label="类型" prop="type">
        <template #default>
          <p v-if="formData.type == 0">普通用户</p>
          <p v-else-if="formData.type == 1">会员</p>
          <p v-else-if="formData.type == 2">招商人员</p>
          <p v-else>未知</p>
        </template>
      </el-form-item>
      <el-form-item label="权重" prop="weight">
        <el-input-number v-model="formData.weight" disabled controls-position="right" />
        <span class="text-gray-400 ml-[10px]"
          >权重值越大等级越高，默认值0表示是最底级的消费者。</span
        >
      </el-form-item>
      <el-form-item label="名称" prop="name" class="!w-[260px]">
        <el-input v-model="formData.name" clearable placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="介绍">
        <editor v-model="formData.introduction" :height="400" mode="simple" />
      </el-form-item>
      <!-- <el-form-item v-if="formData.weight > 0" label="升级方式" prop="upWay">
        <el-radio-group v-model="formData.upWay" disabled>
          <el-radio v-for="(item, index) in upWayTypeList" :key="index" :label="item.value">{{
            item.name
          }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="formData.upWay == '1' || formData.upWay == '2'" label="升级条件">
        <el-checkbox-group disabled>
          <el-checkbox v-for="(item, index) in formData.configFormat" :key="index" checked>{{
            item
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="权益">
        <el-checkbox-group disabled>
          <el-checkbox v-for="(item, index) in formData.benefitsFormat" :key="index" checked>{{
            item
          }}</el-checkbox>
        </el-checkbox-group>
      </el-form-item> -->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" :loading="loading" @click="confirm(formRef)">确定</el-button>
      </span>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'element-plus'
import { update, getDetail } from '@/api/brokerage/level'

const showDialog = ref(false)
const loading = ref(false)

/**
 * 表单数据
 */
const initialFormData = {
  id: '',
  type: '',
  name: '',
  weight: 0,
  introduction: ''
  //upWay: '0',
  //config: [],
  //configFormat: [],
  //benefits: [],
  //benefitsFormat: []
}
const formData: Record<string, any> = reactive({ ...initialFormData })

const formRef = ref<FormInstance>()

// 表单验证规则
const formRules = computed(() => {
  return {
    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    weight: [{ required: true, message: '请输入权重', trigger: 'blur' }]
    // introduction: [{ required: true, message: '请输入介绍', trigger: 'blur' }],
  }
})

const emit = defineEmits(['complete'])

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) {
    return
  }
  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true
      update(formData)
        .then(() => {
          loading.value = false
          showDialog.value = false
          emit('complete')
        })
        .catch(() => {
          loading.value = false
        })
    }
  })
}

const upWayTypeList = ref<any>([
  { name: '不自动升级', value: 0 },
  { name: '满足任意条件', value: 1 },
  { name: '满足全部条件', value: 2 }
])

const setFormData = (id: number | string) => {
  Object.assign(formData, initialFormData)
  loading.value = true
  getDetail(id)
    .then((res: any) => {
      if (res) {
        Object.keys(formData).forEach((key: string) => {
          if (res[key] != undefined) {
            formData[key] = res[key]
          }
        })
      }
      loading.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

defineExpose({
  showDialog,
  setFormData
})
</script>
